<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>数据分析</el-breadcrumb-item>

  </el-breadcrumb>

    <div id="main" style="width: 600px; height:400px;"></div>
    <div id="main1" style="width: 600px; height:400px;"></div>
    <div id="main2" style="width: 600px; height:400px;"></div>
    <span>分界线</span>
    <el-divider></el-divider>

  </div>
</template>
<script>
import * as echarts from 'echarts'
import axios from 'axios'
export default {
  name: 'AnalyticsT',
  data () {
    return {
    }
  },

  components: {},
  computed: {},
  async mounted () {
    const myChart = echarts.init(document.getElementById('main'))
    const myChart1 = echarts.init(document.getElementById('main1'))
    const myChart2 = echarts.init(document.getElementById('main2'))
    const res = await axios.get('/echarts')
    const option = {
      title: {
        text: '能量损耗总计',
        subtext: '扇形图',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: [
            { value: res.data.emission, name: '总碳排放量' },
            { value: res.data.electricity, name: '总耗电量' },
            { value: res.data.water, name: '总耗水量' }

          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    const option2 = {
      title: {
        text: '能量损耗总计',
        subtext: '扇形图',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: [
            { value: res.data.emission, name: '总碳排放量' },
            { value: res.data.electricity, name: '总耗电量' },
            { value: res.data.water, name: '总耗水量' }

          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    const option1 = {
      title: {
        text: '能量损耗总计',
        subtext: '扇形图',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: [
            { value: res.data.emission, name: '总碳排放量' },
            { value: res.data.electricity, name: '总耗电量' },
            { value: res.data.water, name: '总耗水量' }

          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    myChart.setOption(option)
    myChart1.setOption(option1)
    myChart2.setOption(option2)
  }
}
</script>
<style lang="less" scoped>
#main1{
  position: relative;
  left: 500px;
  bottom: 400px;
}
#main2{
  position: relative;
  left: 1000px;
  bottom: 800px;
}
</style>
